<template>
    <div>
        <van-nav-bar title="我的收藏" left-arrow @click-left="onClickLeft"/>
        <div v-if="list.length" id="collect">
            <div style="width: 100%; height: 100%; background: #F7F7F7;">
                <div class="collection" v-for="item in list" :key="item.id">
                    <div style="width: 100%; border: 0px solid black; margin-top:.266667rem;">
                        <div class="border"></div>
                        <div style=" margin-top:.266667rem;">
                            <van-row>
                                <van-col span="6">
                                    <img :src="item.goodsimg" class="goodsimg" @click="onIndex"/>
                                </van-col>
                                <van-col span="16">
                                    <span class="goodsname">{{item.goodsname}}</span>
                                    <div class="goodsprice">￥{{item.goodsprice}}</div>
                                    <div class="item-edit-btn" @click.prevent="remove(item)">
                                        <van-icon name="delete" size="25px" />
                                    </div>
                                </van-col>
                            </van-row>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div v-else class="toCollect">
            <span>收藏里是空的，快去逛逛吧</span><br/>
            <van-button class="btn" plain type="danger" to="/home">去逛逛</van-button>
        </div>
    </div>
</template>
<script>

export default {
    name: 'collect',
    data(){
        return {
            list:[
                {
                    id: 1001,
                    goodsimg:'../../../static/img/goodsdemo.jpg',
                    goodsname:'商品名称',
                    goodsprice:699.00
                },
                {
                    id: 1002,
                    goodsimg:'../../../static/img/goodsdemo.jpg',
                    goodsname:'商品名称',
                    goodsprice:699.00
                }
            ]
        }
    },
    methods:{
        onClickLeft() {
            this.$router.push({path:'/mine'});
        },
        onIndex (){
            this.$router.push({path: '/commoditypage'});
        },
        remove(item){
            let index = this.list.findIndex(lists => {
                return lists.id == item.id;
            })
            this.list.splice(index,1);
        }
    }
}
</script>

<style scoped>
#collect{
    margin-top: 1.226667rem;
}
.van-nav-bar {
    background-color: #ff6341;
	position: fixed;
    width: 100%;
    height: 1.226667rem;
    top: 0;
    left: 0;
}
.van-nav-bar .van-icon {
    color: white;
}
.van-nav-bar__title {
    color: white;
}
.van-stepper__input[disabled] {
    color: black;
}

.collection {
    display: flex;
    width: 94%;
    height: 4rem;
    background: #FFFFFF;
    margin-left: 3%;
    border-radius: .106667rem;
}
.border {
    margin-top: .133333rem;
    height: 2px;
    background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
    background-size: 2.666667rem;
    margin-bottom: .133333rem;
}
.goodsimg{
    margin-left: .266667rem;
    margin-top: .133333rem;
    width: 2.666667rem;
    height: 2.666667rem;
}
.goodsname {
    font-size: 14px;
    margin-top: .4rem;
    margin-left: 1rem;
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-align: left;
}


.goodsprice {
    /* display: flex; */
    font-size: 16px;
    padding-top: .4rem;
    margin-left: 1rem;
    text-align: left;
    font-weight: bold;
    color: #ff5733;
}
.item-edit-btn{
    /* color: #666; */
    margin-left: 5.866667rem;
} 
.toCollect{
    font-size: .533333rem;
    margin-top: 4rem;
    margin-left: 1.066667rem;
}
.btn{
    margin-top: 1.333333rem;
    margin-left: 3.5rem;
}
</style>